<!-- 03VueInstance.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <h3>数据与方法</h3>
    看控制台
    <script>
        console.log(">> 数据与方法");
        var data = { a: 1}
        var vm = new Vue({
            data: data
        })
        console.log( "vm.a == data.a :", vm.a == data.a );
        console.log("vm.a : ", vm.a);
        vm.a = 2
        console.log("vm.a : ", vm.a);
        console.log("data.a : ", data.a);
        data.a = 3
        console.log("vm.a : ", vm.a);
        console.log("data.a : ", data.a);
    </script>
    <hr/>
    <div id="app-1">
        <p>{{ foo }}</p>
        这里的 `foo` 不会更新！
        <button v-on:click="foo = 'baz'">Change it</button>
    </div>
    <script>

        var obj = {
            foo: 'bar'
        }
        Object.freeze(obj)
        var app1 = new Vue({
            el: '#app-1',
            data: obj
        })
    </script>
    <hr/>
    除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 `$`，以便与用户定义的属性区分开来
    <div id="example"></div>
    <script>
        console.log(">> 实例属性与方法");
        var data = { a: 1 }
        var vm = new Vue({
            el: '#example',
            data: data
        })
        console.log("vm.$data === data : ", vm.$data === data);
        console.log("vm.$el === document.getElementById('example') : ", vm.$el === document.getElementById('example'));
        vm.$watch('a', function(newVal, oldVal){
            console.log("newVal: ", newVal)
            console.log("oldVal: ", oldVal)
        })
    </script>
    <h3>实例生命周期钩子</h3>
    <script>
        console.log(">> 实例生命周期钩子");
        new Vue({
            data: {
                a: 101
            },
            created: function() {
                // `this`指向 vm 实例
                console.log('a is: ' + this.a)
            }
        })
    </script>
</body>
</html>